<template>
    <view class="page-box">
        <view class="page-head row verCenter">
            <view class="title column">
                <text class="t2">{{step == 1 ? '验证手机号码' :'设置新密码'}}</text>
            </view>
        </view>
        <view class="from-box" style="margin-top: 30rpx;">
            <template v-if="step == 1">
                <view class="input-box row verCenter">
                    <text class="iconfont icon-shouji"></text>
                    <input type="number" inputmode="tel" placeholder="请输入手机号码" placeholder-style="color: #c3c3c3;" class="uni-input" v-model="form.mobile" />
                </view>
                <!-- 图形验证码 -->
                <view class="input-box row verCenter bothSide">
                    <view class="row verCenter">
                        <text class="iconfont icon-yanzhengma"></text>
                        <input type="text" placeholder="请输入图形验证码" placeholder-style="color: #c3c3c3;" class="uni-input" v-model="form.captcha_code" />
                    </view>
                    <image :src="captcha_code_url" mode="aspectFill" class="pic-code" @click="captcha"></image>
                </view>
                <!-- 手机验证码 -->
                <view class="input-box row verCenter bothSide">
                    <view class="row verCenter">
                        <text class="iconfont icon-yanzhengma"></text>
                        <input type="number" placeholder="请输入短信验证码" placeholder-style="color: #c3c3c3;" class="uni-input" v-model="form.check_code" />
                    </view>
                    <button class="get-code row verCenter rowCenter" :class={isDisabled:isDisabled} :disabled="isDisabled" @click="geyCode">{{ buttonText }}</button>
                </view>
                <view class="btn row verCenter rowCenter" @click="validateChange()" style="margin-top: 70rpx;">下一步</view>
            </template>
            <template v-else-if="step == 2">
                <view class="input-box row verCenter">
                    <text class="iconfont icon-mima"></text>
                    <input type="password" placeholder="请设置6-20位新的登录密码" placeholder-style="color: #c3c3c3;" class="uni-input" v-model="form.password" style="width: 100%;" />
                </view>
                <view class="input-box row verCenter">
                    <text class="iconfont icon-mima"></text>
                    <input type="password" placeholder="请再次输入新的登录密码" placeholder-style="color: #c3c3c3;" class="uni-input" v-model="repassword" style="width: 100%;" />
                </view>
                <view class="btn row verCenter rowCenter" @click="submit" style="margin-top: 70rpx;">下一步</view>
            </template>
        </view>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';

    export default {
        data() {
            return {
                step: 1,
                isDisabled: false,
                buttonText: '获取验证码',
                countdown: 60,
                repassword: '',
                captcha_code_url: '',
                captcha_code_key: '',
                form: {
                    mobile: '', //手机
                    password: '', //密码
                    type: 2, //找回密码
                    check_code: '',
                    captcha_code: '', //图片验证码
                }
            };
        },
        onLoad() {

        },
        onShow() {
            this.captcha();
        },
        methods: {
            /**
             * checkbox监听
             * @param {Object} e
             */
            checkboxChange(e) {
                var values = e.detail.value;
                if (values[0] == 1) {
                    this.is_checked = true;
                } else {
                    this.is_checked = false;
                }
            },
            /**
             * 验证码
             */
            captcha() {
                this.request(API.captchaApp, 'GET', {}, true).then(res => {
                    this.captcha_code_key = res.key;
                    this.captcha_code_url = res.img;
                });
            },
            /**
             * 密码登录
             */
            isPwdLogin() {
                this.captcha();
                this.is_pwd = true;
            },
            /**
             * 获取验证码
             */
            geyCode() {
                if (this.isDisabled) return;
                if (!this.form.mobile) {
                    uni.showToast({
                        title: '请输入手机号码',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.form.captcha_code) {
                    uni.showToast({
                        title: '请输入图形验证码',
                        icon: 'none'
                    });
                    return false;
                }
                //发送手机验证码
                this.sendMsgCode((res) => {
                    if (res.code === 0) {
                        //接口成功之后开始倒计时
                        this.isDisabled = true;
                        this.buttonText = `重新获取${this.countdown}秒`;

                        const countdownInterval = setInterval(() => {
                            this.countdown--;
                            this.buttonText = `重新获取${this.countdown}秒`;

                            if (this.countdown === 0) {
                                clearInterval(countdownInterval);
                                this.isDisabled = false;
                                this.buttonText = '获取验证码';
                                this.countdown = 60; // 重置倒计时
                            }
                        }, 1000);
                    }
                });
            },
            /**
             * 发送手机验证码
             */
            sendMsgCode(callback) {
                this.request(API.sendMsgCode, 'POST', {
                    captcha_code: this.form.captcha_code,
                    mobile: this.form.mobile,
                    captcha_code_key: this.captcha_code_key,
                    type: 2,
                }, true).then(res => {
                    typeof callback == 'function' && callback(res);
                    if (res.code === 0) {
                        let is_tip = window.location.hostname == 'www.szxlyc.com' ? true : false;
                        if (is_tip) {
                            uni.showToast({
                                title: '验证码发送成功',
                                icon: 'success'
                            });
                        } else {
                            uni.showToast({
                                title: res.data.content,
                                icon: 'success'
                            });
                        }
                    } else {
                        this.captcha(); //刷新验证码
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 验证函数
             */
            validateChange() {
                if (!this.form.mobile) {
                    uni.showToast({
                        title: '请输入手机号码',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.form.captcha_code) {
                    uni.showToast({
                        title: '请输入图形验证码',
                        icon: 'none'
                    });
                    return false;
                }
                this.step = 2;
            },
            submit() {
                if (!this.form.password) {
                    uni.showToast({
                        title: '请输入密码',
                        icon: 'none'
                    });
                    return false;
                }

                if (this.form.password != this.repassword) {
                    uni.showToast({
                        title: '两次密码输入不一致',
                        icon: 'none'
                    });
                    return false;
                }
                const passwordRegex = /^[a-zA-Z0-9]{6,20}$/;
                if (!passwordRegex.test(this.form.password)) {
                    uni.showToast({
                        title: '密码必须是6-20位的字母或数字',
                        icon: 'none'
                    });
                    return false;
                }

                this.request(API.forgetPasswd, 'POST', this.form, true).then(res => {
                    if (res.code === 0) {
                        uni.showToast({
                            title: '修改密码成功',
                            icon: 'success'
                        });
                        setTimeout(() => {
                            uni.navigateTo({
                                url: '/pages/mine/login'
                            })
                        }, 2000)
                    } else {
                        this.captcha();
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/mine/forgetPwd.scss';

    ::v-deep {
        uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
            background-color: #007aff !important;
            color: #fff !important;
        }
    }
</style>